<script setup>
import { ref, computed } from 'vue';
import { useTeacherStore } from '@/stores/modules/teacherStore.js';
import { reqLeaveNote, reqLeaveProccessed } from '@/api/teacher/record/leave';
import { reqPublicClassNoteProccessed } from '@/api/teacher/record/publicClass';
import {
    reqPsychologyNoteProcessed,
    reqPsychologyNoteUntreated
} from '@/api/teacher/record/psychology';
import { getStates } from '@/utils/getStateNumber.js';
import todoListItem from '@/component/todoListItem.vue';

const teacherStore = useTeacherStore();

// 1: 待办
// 2: 已办
const activeIndex = ref('1');

// 下拉加载
const load = () => {
    loading.value = true;
    loadTodoList();
};

// 是否显示加载中
const loading = ref(false);

// 是否提示todolist没有更多数据
const noMore = ref(false);

// 用于刷新
const isShowContent = ref(true);

// 在加载时和没有数据的时候不能继续使用下拉加载
// (可以理解为在加载时和没多数据时不能使用load方法)
const disabled = computed(() => loading.value || noMore.value);

// li列表
let list = ref([]);

// 文体预约申请列表 和 图书管理预约申请列表
let managerList = ref([]);

// 心里预约列表
let psychologyList = ref([]);

// 公共教室预约申请列表
let publicClassroomList = ref([]);

// 获取申请
const loadTodoList = async () => {
    const roleNums = teacherStore.roleNums;
    const state = getStates(roleNums);
    pageNo++;
    if (activeIndex.value == '1') {
        await getNeedToDoNote(roleNums);
    } else if (activeIndex.value == '2') {
        await getDoneNote(roleNums, state);
    }
};

// 请求代办
const getNeedToDoNote = async roleNums => {
    const isNoMore = [];
    if (roleNums.includes(96)) {
        const flag = await getNote(
            reqPublicClassNoteProccessed,
            publicClassroomList,
            0
        );
        isNoMore.push(flag);
    }
    const flag1 = await getNote(reqLeaveNote, list);
    const flag2 = await getNote(reqPsychologyNoteUntreated, psychologyList);
    isNoMore.push(flag1, flag2);
    noMore.value = isNoMore.every(flag => flag);
    loading.value = false;
};

// 请求已办
const getDoneNote = async (roleNums, state) => {
    const isNoMore = [];
    if (roleNums.includes(96)) {
        const flag = await getNote(
            reqPublicClassNoteProccessed,
            publicClassroomList,
            1
        );
        isNoMore.push(flag);
    }
    const flag1 = await getNote(reqLeaveProccessed, list, state);
    const flag2 = await getNote(reqPsychologyNoteProcessed, psychologyList);
    isNoMore.push(flag1, flag2);
    noMore.value = isNoMore.every(flag => flag);
    loading.value = false;
};

// 页序
let pageNo = 0;
// 每一页的数量
let pageSize = 5;

const getNote = async (req, list, ...query) => {
    const result = await req(pageNo, pageSize, ...query);

    if (result.status == 200) {
        const dataList = result.dataList;

        if (dataList) {
            list.value.push(...dataList);

            if (dataList.length < 5) {
                return true;
            }

            return false;
        } else {
            return true;
        }
    } else {
        return true;
    }
};

// 切换时调用的函数
const setMenu = async index => {
    activeIndex.value = index;
    pageNo = 0;
    noMore.value = false;
    loading.value = true;
    list.value = [];
    managerList.value = [];
    publicClassroomList.value = [];
    psychologyList.value = [];
    // 调用两次是因为要将数据加载出来,如果不这样做"无限加载"无法正常工作
    await loadTodoList();
    await loadTodoList();
};
</script>

<template>
    <div class="container">
        <el-menu
            background-color="#3377ff"
            text-color="#fff"
            active-text-color="#ff6633"
            :default-active="activeIndex"
            @select="setMenu"
            class="menu"
            mode="horizontal"
        >
            <el-menu-item index="1">待办</el-menu-item>
            <el-menu-item index="2">已办</el-menu-item>
        </el-menu>
        <div class="content" v-if="isShowContent">
            <ul
                class="todoList"
                v-infinite-scroll="load"
                :infinite-scroll-disabled="disabled"
                infinite-scroll-distance="20"
            >
                <todoListItem
                    :list="list"
                    :managerList="managerList"
                    :publicClassroomList="publicClassroomList"
                    :psychologyList="psychologyList"
                ></todoListItem>

                <div v-if="loading" class="loading" v-loading="loading"></div>
                <div v-if="noMore" class="no-more">没有更多数据了</div>
            </ul>
        </div>
    </div>
</template>

<style scoped lang="scss">
.container {
    position: relative;
    height: 100vh;
    font-size: 16rem;
    background-color: rgb(247, 247, 247);
}

.menu {
    width: 100%;
    height: 55rem;
}

.content {
    position: absolute;
    top: 55rem;
    left: 0;
    right: 0;
    bottom: 0;

    .todoList {
        height: 100%;
        width: 100%;
        overflow: auto;
        color: rgba(85, 85, 85);
        padding: 0 10rem;
        padding-top: 10rem;

        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 10rem;
            font-size: large;
            margin-top: 20rem;
            background-color: #bbb;
        }

        .no-more {
            width: 100%;
            height: 10rem;
            margin-top: 20rem;
            font-size: 14rem;
            color: #999;
            text-align: center;
        }
    }
}
</style>
